<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { theme } from 'ant-design-vue';
import Layout from './components/Layout.vue';
import { useLocaleStore } from './stores/locale';
import { useThemeStore } from './stores/theme';

const localeStore = useLocaleStore();
const themeStore = useThemeStore();

// 获取语言包
const antdLocale = computed(() => localeStore.getAntdLocale());
const elementLocale = computed(() => localeStore.getElementLocale());

// Ant Design Vue 主题配置 - 使用 VueUse 的 isDark
const antdTheme = computed(() => ({
  algorithm: themeStore.isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
  ...themeStore.getAntdThemeConfig,
}));

onMounted(() => {
  // 初始化语言设置
  localeStore.initLocale();
  // VueUse 的 useDark 会自动初始化主题，但我们仍然调用 initTheme 来应用额外的样式
  themeStore.initTheme();
});
</script>

<template>
  <!-- Ant Design Vue 的 ConfigProvider -->
  <a-config-provider :locale="antdLocale" :theme="antdTheme">
    <!-- Element Plus 的 ConfigProvider -->
    <el-config-provider :locale="elementLocale">
      <layout />
    </el-config-provider>
  </a-config-provider>
</template>

<style></style>
